<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>邀请好友</title>
    <link rel="stylesheet" href="">
    <link rel="stylesheet" href="css/style.css">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
</head>
<body>
<!--fixed remove-->
<section class="fixed"
         style="z-index:999;width: 100%;height: 100%;background-color: #000;position: fixed;left: 0;top: 0;"></section>
<section class="invite_page">
    <div class="pop_item pop_modal_page">
            <span class="inner_bg">
                <span class="close_btn"></span>
            </span>
    </div>
    <div><img src="img/invite_01.jpg" width="100%" height="auto"></div>
    <div><img src="img/invite_02.jpg" width="100%" height="auto"></div>
    <div><img src="img/invite_03.jpg" width="100%" height="auto"></div>
    <div><img src="img/invite_04.jpg" width="100%" height="auto"></div>
    <div class="relative">
        <img src="img/invite_05.jpg" width="100%" height="auto">
        <div class="wrapBar">
            <div class="inner"></div>
        </div>
    </div>
    <div class="hint">您还需要邀请<span class="f_num num">30</span>位好友，即可获得<span class="num">1000</span>积分</div>
    <span class="tj_btn gray_btn">领取1000积分</span>
</section>
</body>
<script src="js/jquery-1.12.3.min.js"></script>
<script src="js/common.js"></script>
<script>
    $(window).load(function () {
        initProgress();
        function initProgress(){
            var num = 12;
            if(num >= 20){
                num = 20;
            }
            $(".wrapBar .inner").width(num/20 * 100 + '%');
        }

        function closePopModal() {
            $(".pop_modal_page").fadeOut();
        }

        $(".pop_modal_page .close_btn").on('click', closePopModal);
    });

</script>
</html>